<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>人力资源管理系统 - 仪表盘</title>
  <!-- 引入外部资源 -->
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

  <!-- Tailwind配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#2563eb',
            secondary: '#64748b',
            success: '#10b981',
            warning: '#f59e0b',
            danger: '#ef4444',
            dark: '#1e293b',
            light: '#f8fafc'
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>

  <!-- 引入公共CSS -->
  <link rel="stylesheet" href="css/common.css">

  <!-- 引入API和公共JS -->
  <script src="js/api.js"></script>
  <script src="js/common.js"></script>
</head>
<body class="bg-gray-50 text-gray-800 font-sans">
  <div id="app" class="flex h-screen overflow-hidden">
    <!-- 侧边栏 -->
    <aside id="sidebar" class="w-64 bg-white border-r border-gray-200 flex-shrink-0 hidden md:block transition-all duration-300">
      <div class="p-5 border-b border-gray-200">
        <h1 class="text-xl font-bold text-primary">人力资源管理系统</h1>
      </div>

      <nav class="p-3">
        <ul>
          <li>
            <a href="index.html" class="sidebar-item active">
              <i class="fa fa-dashboard"></i>
              <span>仪表盘</span>
            </a>
          </li>
          <li>
            <a href="projects.html" class="sidebar-item">
              <i class="fa fa-briefcase"></i>
              <span>项目中心</span>
            </a>
          </li>
          <li>
            <a href="employees.html" class="sidebar-item">
              <i class="fa fa-users"></i>
              <span>员工管理</span>
            </a>
          </li>
          <li>
            <a href="tasks.html" class="sidebar-item">
              <i class="fa fa-tasks"></i>
              <span>任务管理</span>
            </a>
          </li>
          <li>
            <a href="reports.html" class="sidebar-item">
              <i class="fa fa-bar-chart"></i>
              <span>分析报表</span>
            </a>
          </li>
        </ul>
      </nav>

      <div class="absolute bottom-0 w-full p-4 border-t border-gray-200">
        <div class="flex items-center gap-3">
          <img id="userAvatar" src="https://picsum.photos/200/200?random=1" alt="用户头像" class="w-10 h-10 rounded-full object-cover">
          <div>
            <p id="user" class="font-medium text-sm">张三</p>
            <p id="userRole" class="text-xs text-gray-500">项目经理</p>
          </div>
          <button id="logoutBtn" class="ml-auto text-gray-500 hover:text-danger">
            <i class="fa fa-sign-out"></i>
          </button>
        </div>
      </div>
    </aside>

    <!-- 主内容区 -->
    <main class="flex-1 flex flex-col overflow-hidden">
      <!-- 顶部导航 -->
      <header class="bg-white border-b border-gray-200 h-16 flex items-center justify-between px-6">
        <div class="flex items-center">
          <button id="sidebarToggle" class="md:hidden mr-4 text-gray-500">
            <i class="fa fa-bars text-xl"></i>
          </button>
          <h2 id="pageTitle" class="text-lg font-semibold">综合仪表盘</h2>
        </div>

        <div class="flex items-center gap-4">
          <div class="relative">
            <input type="text" placeholder="搜索..." id="globalSearch" class="pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary w-64">
            <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
          </div>

          <button id="notificationBtn" class="relative text-gray-500 hover:text-primary">
            <i class="fa fa-bell text-xl"></i>
            <span id="notificationCount" class="absolute -top-1 -right-1 bg-danger text-white text-xs w-4 h-4 rounded-full flex items-center justify-center">3</span>
          </button>
        </div>
      </header>

      <!-- 页面内容 -->
      <div class="flex-1 overflow-y-auto p-6">
        <!-- 核心指标 -->
        <section id="dashboardSection" class="mb-8">
          <div class="flex justify-between items-center mb-6">
            <h3 class="text-lg font-semibold">核心指标</h3>
            <div class="flex gap-2">
              <button class="btn btn-primary text-sm">本周</button>
              <button class="btn btn-secondary text-sm">本月</button>
              <button class="btn btn-secondary text-sm">全年</button>
            </div>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <!-- 进行中项目数 -->
            <div class="card">
              <div class="flex justify-between items-start mb-4">
                <div>
                  <p class="text-gray-500 text-sm">进行中项目数</p>
                  <h4 id="activeProjects" class="text-3xl font-bold mt-1">12</h4>
                </div>
                <div class="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center text-primary">
                  <i class="fa fa-briefcase"></i>
                </div>
              </div>
              <div class="flex items-center text-sm">
                <span id="activeProjectsChange" class="text-success flex items-center">
                  <i class="fa fa-arrow-up mr-1"></i> 16.7%
                </span>
                <span class="text-gray-500 ml-2">相比上月</span>
              </div>
            </div>

            <!-- 可用人员数 -->
            <div class="card">
              <div class="flex justify-between items-start mb-4">
                <div>
                  <p class="text-gray-500 text-sm">可用人员数</p>
                  <h4 id="availableTalents" class="text-3xl font-bold mt-1">8</h4>
                </div>
                <div class="w-10 h-10 rounded-lg bg-green-100 flex items-center justify-center text-success">
                  <i class="fa fa-user"></i>
                </div>
              </div>
              <div class="flex items-center text-sm">
                <span id="availableTalentsChange" class="text-danger flex items-center">
                  <i class="fa fa-arrow-down mr-1"></i> 11.1%
                </span>
                <span class="text-gray-500 ml-2">相比上月</span>
              </div>
            </div>

            <!-- 技能缺口预警 -->
            <div class="card">
              <div class="flex justify-between items-start mb-4">
                <div>
                  <p class="text-gray-500 text-sm">技能缺口预警</p>
                  <h4 id="skillGaps" class="text-3xl font-bold mt-1">3</h4>
                </div>
                <div class="w-10 h-10 rounded-lg bg-orange-100 flex items-center justify-center text-warning">
                  <i class="fa fa-exclamation-triangle"></i>
                </div>
              </div>
              <div class="flex items-center text-sm">
                <span id="skillGapsChange" class="text-warning flex items-center">
                  <i class="fa fa-arrow-right mr-1"></i> 持平
                </span>
                <span class="text-gray-500 ml-2">相比上月</span>
              </div>
            </div>
          </div>

          <!-- 项目进度图表 -->
          <div class="card mt-6">
            <h3 class="text-lg font-semibold mb-4">项目进度概览</h3>
            <div class="h-80">
              <canvas id="projectProgressChart"></canvas>
            </div>
          </div>
        </section>

        <!-- 动态看板 -->
        <section class="mb-8">
          <h3 class="text-lg font-semibold mb-6">动态看板</h3>

          <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <!-- 新分配任务 -->
            <div class="card">
              <div class="flex justify-between items-center mb-4">
                <h4 class="font-medium">新分配任务</h4>
                <a href="tasks.html" class="text-primary text-sm hover:underline cursor-pointer">查看全部</a>
              </div>

              <div id="tasksContainer" class="space-y-4">
                <!-- 任务列表将动态加载 -->
              </div>
            </div>

            <!-- 人员状态变更 -->
            <div class="card">
              <div class="flex justify-between items-center mb-4">
                <h4 class="font-medium">人员状态变更</h4>
                <a href="talents.html" class="text-primary text-sm hover:underline cursor-pointer">查看全部</a>
              </div>

              <div id="statusChangesContainer" class="space-y-4">
                <!-- 状态变更列表将动态加载 -->
                <div class="flex items-center gap-3 p-3 border border-gray-100 rounded-lg">
                  <img src="https://picsum.photos/200/200?random=2" alt="李四" class="w-10 h-10 rounded-full object-cover">
                  <div class="flex-1">
                    <p class="text-sm font-medium">
                      <span class="text-primary">李四</span> 状态变更为
                      <span class="text-success font-semibold">忙碌</span>
                    </p>
                    <p class="text-xs text-gray-500 mt-1">今天 10:30</p>
                  </div>
                  <div class="text-gray-400">
                    <i class="fa fa-ellipsis-v"></i>
                  </div>
                </div>
                <div class="flex items-center gap-3 p-3 border border-gray-100 rounded-lg">
                  <img src="https://picsum.photos/200/200?random=5" alt="钱七" class="w-10 h-10 rounded-full object-cover">
                  <div class="flex-1">
                    <p class="text-sm font-medium">
                      <span class="text-primary">钱七</span> 状态变更为
                      <span class="text-danger font-semibold">休假</span>
                    </p>
                    <p class="text-xs text-gray-500 mt-1">昨天 16:45</p>
                  </div>
                  <div class="text-gray-400">
                    <i class="fa fa-ellipsis-v"></i>
                  </div>
                </div>
                <div class="flex items-center gap-3 p-3 border border-gray-100 rounded-lg">
                  <img src="https://picsum.photos/200/200?random=6" alt="孙八" class="w-10 h-10 rounded-full object-cover">
                  <div class="flex-1">
                    <p class="text-sm font-medium">
                      <span class="text-primary">孙八</span> 状态变更为
                      <span class="text-success font-semibold">可用</span>
                    </p>
                    <p class="text-xs text-gray-500 mt-1">2天前</p>
                  </div>
                  <div class="text-gray-400">
                    <i class="fa fa-ellipsis-v"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <!-- 快速操作 -->
        <section>
          <h3 class="text-lg font-semibold mb-6">快速操作</h3>

          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- 新建任务 -->
            <a href="tasks.html#create" class="quick-action-card bg-gradient-to-r from-blue-500 to-indigo-600 text-white shadow-lg cursor-pointer transform hover:scale-[1.02] transition-all duration-300">
              <div class="quick-action-icon bg-white/20 text-white">
                <i class="fa fa-plus text-xl"></i>
              </div>
              <div>
                <h4 class="font-bold text-lg">新建任务</h4>
                <p class="text-white/80 text-sm mt-1">快速创建并分配新任务</p>
              </div>
            </a>

            <!-- 添加人员 -->
            <a href="talents.html#create" class="quick-action-card bg-gradient-to-r from-green-500 to-teal-600 text-white shadow-lg cursor-pointer transform hover:scale-[1.02] transition-all duration-300">
              <div class="quick-action-icon bg-white/20 text-white">
                <i class="fa fa-user-plus text-xl"></i>
              </div>
              <div>
                <h4 class="font-bold text-lg">添加人员</h4>
                <p class="text-white/80 text-sm mt-1">快速录入新人员信息</p>
              </div>
            </a>
          </div>
        </section>
      </div>
    </main>
  </div>

  <!-- 引入公共JS -->
  <script src="js/common.js"></script>
  <script>
    // 仪表盘特定JS
    document.addEventListener('DOMContentLoaded', function() {
      // 初始化侧边栏
      initSidebar();
      // 初始化用户信息
      initUserInfo();
      // 初始化登出功能
      initLogout();
      // 检查认证
      if (!checkAuthentication()) {
        return;
      }

      // 加载仪表盘内容
      loadDashboardContent();

      // 初始化项目进度图表
      initProjectProgressChart();

      // 加载任务数据
      loadTasksData();
    });

    // 加载仪表盘内容
    function loadDashboardContent() {
      showLoading();
      api.getMetrics()
        .then(metrics => {
          // 更新核心指标
          document.getElementById('activeProjects').textContent = metrics.activeProjects;
          document.getElementById('activeProjectsChange').innerHTML = `<i class="fa fa-arrow-up mr-1"></i> ${metrics.activeProjectsChange}%`;
          document.getElementById('availableTalents').textContent = metrics.availableTalents;
          document.getElementById('availableTalentsChange').innerHTML = `<i class="fa fa-arrow-down mr-1"></i> ${metrics.availableTalentsChange}%`;
          document.getElementById('skillGaps').textContent = metrics.skillGaps;
          document.getElementById('skillGapsChange').innerHTML = `<i class="fa fa-arrow-right mr-1"></i> 持平`;

          // 根据用户角色加载不同内容
          const userInfo = localStorage.getItem('userInfo');
          if (userInfo) {
            try {
              const user = JSON.parse(userInfo);
              const role = user.role;

              if (role === 'admin') {
                loadAdminDashboard(metrics);
              } else if (role === 'project_manager') {
                loadProjectManagerDashboard(metrics);
              } else {
                loadEmployeeDashboard(metrics);
              }
            } catch (error) {
              console.error('解析用户信息失败:', error);
              showToast('解析用户信息失败', 'error');
            }
          }

          hideLoading();
        })
        .catch(error => {
          console.error('加载仪表盘数据失败:', error);
          hideLoading();
          showToast('加载仪表盘数据失败', 'error');
        });
    }

    // 初始化项目进度图表
    function initProjectProgressChart() {
      showLoading();
      api.getProjectCompletion()
        .then(data => {
          const ctx = document.getElementById('projectProgressChart').getContext('2d');
          new Chart(ctx, {
            type: 'bar',
            data: {
              labels: data.projects.map(p => p.name),
              datasets: [{
                label: '完成度',
                data: data.projects.map(p => p.completion),
                backgroundColor: [
                  'rgba(37, 99, 235, 0.6)',
                  'rgba(16, 185, 129, 0.6)',
                  'rgba(245, 158, 11, 0.6)',
                  'rgba(239, 68, 68, 0.6)',
                  'rgba(100, 116, 139, 0.6)'
                ],
                borderColor: [
                  'rgba(37, 99, 235, 1)',
                  'rgba(16, 185, 129, 1)',
                  'rgba(245, 158, 11, 1)',
                  'rgba(239, 68, 68, 1)',
                  'rgba(100, 116, 139, 1)'
                ],
                borderWidth: 1
              }]
            },
            options: {
              responsive: true,
              maintainAspectRatio: false,
              scales: {
                y: {
                  beginAtZero: true,
                  max: 100
                }
              }
            }
          });
          hideLoading();
        })
        .catch(error => {
          console.error('加载项目进度数据失败:', error);
          hideLoading();
          showToast('加载项目进度数据失败', 'error');
        });
    }

    // 加载任务数据
    function loadTasksData() {
      showLoading();
      api.getAllTasks()
        .then(tasks => {
          const tasksContainer = document.getElementById('tasksContainer');
          if (tasksContainer) {
            // 清空容器
            tasksContainer.innerHTML = '';

            // 只显示前3个任务
            const recentTasks = tasks.slice(0, 3);

            recentTasks.forEach(task => {
              const taskElement = document.createElement('div');
              taskElement.className = 'flex items-center gap-3 p-3 border border-gray-100 rounded-lg hover:bg-gray-50 transition-colors duration-200 cursor-pointer';
              taskElement.innerHTML = `
                <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                  <i class="fa fa-tasks"></i>
                </div>
                <div class="flex-1">
                  <p class="text-sm font-medium">${task.title}</p>
                  <p class="text-xs text-gray-500 mt-1">
                    <span>负责人: ${task.assignee}</span> |
                    <span>截止日期: ${task.deadline}</span>
                  </p>
                </div>
                <span class="badge ${task.priority === '高' ? 'bg-danger/20 text-danger' : task.priority === '中' ? 'bg-warning/20 text-warning' : 'bg-success/20 text-success'}">${task.priority}</span>
              `;
              tasksContainer.appendChild(taskElement);
            });
          }
          hideLoading();
        })
        .catch(error => {
          console.error('加载任务数据失败:', error);
          hideLoading();
          showToast('加载任务数据失败', 'error');
        });
    }

    // 加载管理员仪表盘
    function loadAdminDashboard(metrics) {
      const dashboardContent = document.getElementById('dashboardContent');
      if (!dashboardContent) return;

      dashboardContent.innerHTML = `
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
          <div class="card">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-lg font-semibold text-gray-700">员工总数</h3>
              <i class="fa fa-users text-primary text-xl"></i>
            </div>
            <p class="text-3xl font-bold text-gray-800" id="totalEmployees">${metrics.totalEmployees || 0}</p>
            <p class="text-sm text-gray-500 mt-1"><i class="fa fa-arrow-up text-success"></i> 较上月增长 ${metrics.employeesGrowth || 0}%</p>
          </div>
          <div class="card">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-lg font-semibold text-gray-700">项目总数</h3>
              <i class="fa fa-briefcase text-primary text-xl"></i>
            </div>
            <p class="text-3xl font-bold text-gray-800" id="totalProjects">${metrics.totalProjects || 0}</p>
            <p class="text-sm text-gray-500 mt-1"><i class="fa fa-arrow-up text-success"></i> 较上月增长 ${metrics.projectsGrowth || 0}%</p>
          </div>
          <div class="card">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-lg font-semibold text-gray-700">今日请假</h3>
              <i class="fa fa-calendar-times-o text-primary text-xl"></i>
            </div>
            <p class="text-3xl font-bold text-gray-800" id="todayLeave">${metrics.todayLeave || 0}</p>
            <p class="text-sm text-gray-500 mt-1"><i class="fa fa-arrow-down text-danger"></i> 较昨日减少 ${metrics.leaveDecrease || 0}人</p>
          </div>
          <div class="card">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-lg font-semibold text-gray-700">月度薪资支出</h3>
              <i class="fa fa-money text-primary text-xl"></i>
            </div>
            <p class="text-3xl font-bold text-gray-800" id="monthlySalary">¥${metrics.monthlySalary || 0}</p>
            <p class="text-sm text-gray-500 mt-1"><i class="fa fa-arrow-up text-danger"></i> 较上月增长 ${metrics.salaryGrowth || 0}%</p>
          </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
          <div class="card">
            <h3 class="text-lg font-semibold text-gray-700 mb-4">员工部门分布</h3>
            <div class="h-64">
              <canvas id="departmentChart"></canvas>
            </div>
          </div>
          <div class="card">
            <h3 class="text-lg font-semibold text-gray-700 mb-4">项目进度分布</h3>
            <div class="h-64">
              <canvas id="adminProjectProgressChart"></canvas>
            </div>
          </div>
        </div>
      `;

      // 加载部门分布图表
      loadDepartmentChart();

      // 加载项目进度图表
      loadAdminProjectProgressChart();
    }

    // 加载部门分布图表
    function loadDepartmentChart() {
      showLoading();
      api.getDepartments()
        .then(departments => {
          const departmentCtx = document.getElementById('departmentChart').getContext('2d');
          new Chart(departmentCtx, {
            type: 'pie',
            data: {
              labels: departments.map(dept => dept.name),
              datasets: [{
                data: departments.map(dept => dept.employeeCount),
                backgroundColor: [
                  '#2563eb', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899'
                ]
              }]
            },
            options: {
              responsive: true,
              maintainAspectRatio: false
            }
          });
          hideLoading();
        })
        .catch(error => {
          console.error('加载部门数据失败:', error);
          hideLoading();
          showToast('加载部门数据失败', 'error');
        });
    }

    // 加载管理员项目进度图表
    function loadAdminProjectProgressChart() {
      showLoading();
      api.getProjectCompletion()
        .then(data => {
          const projectCtx = document.getElementById('adminProjectProgressChart').getContext('2d');
          new Chart(projectCtx, {
            type: 'bar',
            data: {
              labels: data.projects.map(p => p.name),
              datasets: [{
                label: '完成度',
                data: data.projects.map(p => p.completion),
                backgroundColor: '#2563eb'
              }]
            },
            options: {
              responsive: true,
              maintainAspectRatio: false,
              scales: {
                y: {
                  beginAtZero: true,
                  max: 100
                }
              }
            }
          });
          hideLoading();
        })
        .catch(error => {
          console.error('加载项目进度数据失败:', error);
          hideLoading();
          showToast('加载项目进度数据失败', 'error');
        });
    }

    // 加载项目经理仪表盘
    function loadProjectManagerDashboard(metrics) {
      // 实现项目经理仪表盘内容加载
      // 类似管理员仪表盘，但加载不同的数据和图表
      const dashboardContent = document.getElementById('dashboardContent');
      if (!dashboardContent) return;

      // 这里简化实现，实际项目中应根据需求完善
      dashboardContent.innerHTML = `
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">
          <div class="card">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-lg font-semibold text-gray-700">负责项目</h3>
              <i class="fa fa-briefcase text-primary text-xl"></i>
            </div>
            <p class="text-3xl font-bold text-gray-800" id="pmTotalProjects">${metrics.pmTotalProjects || 0}</p>
          </div>
          <div class="card">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-lg font-semibold text-gray-700">进行中项目</h3>
              <i class="fa fa-spinner text-warning text-xl"></i>
            </div>
            <p class="text-3xl font-bold text-gray-800" id="pmActiveProjects">${metrics.pmActiveProjects || 0}</p>
          </div>
          <div class="card">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-lg font-semibold text-gray-700">逾期任务</h3>
              <i class="fa fa-exclamation-circle text-danger text-xl"></i>
            </div>
            <p class="text-3xl font-bold text-gray-800" id="pmOverdueTasks">${metrics.pmOverdueTasks || 0}</p>
          </div>
        </div>
      `;
    }

    // 加载员工仪表盘
    function loadEmployeeDashboard(metrics) {
      // 实现普通员工仪表盘内容加载
      // 简化实现
      const dashboardContent = document.getElementById('dashboardContent');
      if (!dashboardContent) return;

      dashboardContent.innerHTML = `
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
          <div class="card">
            <h3 class="text-lg font-semibold text-gray-700 mb-4">待办任务</h3>
            <div class="space-y-3" id="empTodoTasks"></div>
          </div>
          <div class="card">
            <h3 class="text-lg font-semibold text-gray-700 mb-4">参与项目</h3>
            <div class="space-y-3" id="empProjects"></div>
          </div>
        </div>
      `;

      // 加载员工待办任务
      loadEmployeeTasks();

      // 加载员工参与项目
      loadEmployeeProjects();
    }

    // 加载员工待办任务
    function loadEmployeeTasks() {
      showLoading();
      api.getAllTasks()
        .then(tasks => {
          const tasksContainer = document.getElementById('empTodoTasks');
          if (tasksContainer) {
            tasksContainer.innerHTML = '';
            // 假设只显示前5个任务
            const userTasks = tasks.slice(0, 5);

            userTasks.forEach(task => {
              const taskElement = document.createElement('div');
              taskElement.className = 'p-3 border border-gray-100 rounded-lg';
              taskElement.innerHTML = `
                <p class="text-sm font-medium">${task.title}</p>
                <p class="text-xs text-gray-500 mt-1">截止日期: ${task.deadline}</p>
                <div class="mt-2 flex justify-between items-center">
                  <span class="badge ${task.status === '未开始' ? 'bg-gray-200 text-gray-700' : task.status === '进行中' ? 'bg-blue-100 text-blue-700' : 'bg-green-100 text-green-700'}">${task.status}</span>
                  <span class="text-xs text-gray-500">${task.project}</span>
                </div>
              `;
              tasksContainer.appendChild(taskElement);
            });
          }
          hideLoading();
        })
        .catch(error => {
          console.error('加载员工任务失败:', error);
          hideLoading();
          showToast('加载任务数据失败', 'error');
        });
    }

    // 加载员工参与项目
    function loadEmployeeProjects() {
      showLoading();
      api.getAllProjects()
        .then(projects => {
          const projectsContainer = document.getElementById('empProjects');
          if (projectsContainer) {
            projectsContainer.innerHTML = '';
            // 假设只显示前3个项目
            const userProjects = projects.slice(0, 3);

            userProjects.forEach(project => {
              const projectElement = document.createElement('div');
              projectElement.className = 'p-3 border border-gray-100 rounded-lg';
              projectElement.innerHTML = `
                <p class="text-sm font-medium">${project.name}</p>
                <div class="mt-2 w-full bg-gray-200 rounded-full h-2.5">
                  <div class="bg-primary h-2.5 rounded-full" style="width: ${project.completion}%"></div>
                </div>
                <p class="text-xs text-gray-500 mt-1">${project.completion}% 完成</p>
              `;
              projectsContainer.appendChild(projectElement);
            });
          }
          hideLoading();
        })
        .catch(error => {
          console.error('加载员工项目失败:', error);
          hideLoading();
          showToast('加载项目数据失败', 'error');
        });
    }
  </script>
  </body>
  </html>